<template>
  <!-- 弹层效果 -->
  <div class='aa-productDetails'>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in partItem.images" :key="index" @click="loadimg(image, index)">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>

    <div class='aa-productNameAndCode'>
      <div class='aa-productNameBox'>
        <span>{{partItem.brandName}} {{partItem.partsNo}}</span>
        <span class='aa-seriesLabel' v-if="partItem.series">{{partItem.series}}</span>
        <span class='aa-importLabel' v-if="partItem.place">{{partItem.place}}</span>
      </div>
      <div class='aa-otherCodeBox' v-if="partItem.otherCodes_text">
        <span class='aa-otherCodeName'>其他编码：</span>
        <span>{{partItem.otherCodes_text}}</span>
      </div>
    </div>
    <div class='aa-productParameter' v-if="partItem.properties &&partItem.properties.length>0">
      <div class='aa-singleParameter' v-for="(item, index) in partItem.properties" :key="index">
        <span class='aa-left'>{{item.name}}</span>
        <span class='aa-right'>{{item.value}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem, ImagePreview } from "vant";
export default {
  name: "",
  props: ["partItemInfoDialog_input"],
  data() {
    return {
      imgUrls: [],
      shopId: 0, //云店ID
      partItemId: 0, //产品ID
      partItem: {}, //产品详情
    };
  },
  created() {
    this.shopId = this.partItemInfoDialog_input.shopId;
    this.partItemId = this.partItemInfoDialog_input.partItemId;
    this.GetPartItemDetail();
  },
  methods: {
    async GetPartItemDetail() {
      if (this.partItem.partItemId > 0) return;
      const res = await this.$appServive({
        url: "/Misc/GetPartItemDetail_V2",
        data: {
          shopId: this.shopId,
          partItemId: this.partItemId,
        },
      });
      res.otherCodes_text = (res.otherCodes || []).join(",");
      this.partItem = res;
      this.imgUrls = res.images || [];
    },
    //关不当前弹层
    on_close_click() {
      this.$emit("close", "");
    },
    loadimg(image, index) {
      ImagePreview({
        images: this.imgUrls,
        startPosition: index,
        closeable: true,
      });
    },
  },
};
</script>

<style scoped>
.aa-productDetails .van-swipe__track {
  height: 5.6rem;
}
.aa-productDetails .van-swipe-item {
  width: 8.4rem !important;
}
.aa-productDetails .van-swipe__track img {
  width: 100%;
  height: 100%;
}
/* 商品详情弹层 */
.aa-productDetails {
  width: 100%;
  float: left;
  clear: left;
}
.aa-productPicBox,
.aa-productPicBox swiper {
  width: 100%;
  height: 5.6rem;
  float: left;
  clear: left;
}
.slide-image {
  width: 100%;
  height: 100%;
}
.aa-productNameAndCode {
  width: 100%;
  float: left;
  clear: left;
}
.aa-productNameBox {
  width: 100%;
  background: #fafafa;
  padding: 0.16rem 0.32rem;
  box-sizing: border-box;
  float: left;
  clear: left;
}
.aa-productNameBox span {
  width: auto;
  margin: 0 0.08rem;
  font-size: 0.37rem;
  line-height: 0.64rem;
  text-align: left;
  color: #181818;
  float: left;
  clear: none;
}
.aa-productNameBox span.aa-seriesLabel {
  height: 0.48rem;
  padding: 0 0.08rem;
  margin: 0.08rem;
  background: #3498db;
  border-radius: 0.16rem 0.08rem 0.16rem 0.08rem;
  font-size: 0.32rem;
  line-height: 0.48rem;
  color: #fff;
}
.aa-productNameBox span.aa-importLabel {
  height: 0.48rem;
  padding: 0 0.08rem;
  margin: 0.08rem;
  background: #e74c3c;
  border-radius: 0.16rem 0.08rem 0.16rem 0.08rem;
  font-size: 0.32rem;
  line-height: 0.48rem;
  color: #fff;
}
.aa-otherCodeBox {
  width: 100%;
  padding: 0.16rem 0.4rem 0.16rem 2rem;
  box-sizing: border-box;
  float: left;
  clear: left;
}
.aa-otherCodeBox > span {
  width: 100%;
  font-size: 0.32rem;
  line-height: 0.64rem;
  text-align: justify;
  color: #282828;
  word-wrap: break-word;
  word-break: normal;
  float: left;
  clear: none;
}
.aa-otherCodeBox > span.aa-otherCodeName {
  width: 1.6rem;
  margin-left: -1.6rem;
  color: #666;
  white-space: nowrap;
}
.aa-productParameter {
  width: 100%;
  padding-left: 0.4rem;
  float: left;
  clear: left;
}
.aa-singleParameter {
  width: 100%;
  border-bottom: 1px solid #e8e8e8;
  padding: 0.16rem 0.4rem 0.16rem 0;
  float: left;
  clear: left;
}
.aa-singleParameter span {
  font-size: 0.32rem;
  line-height: 0.64rem;
  text-align: left;
  float: left;
  clear: none;
}
.aa-singleParameter span.aa-left {
  width: 32%;
  color: #666;
}
.aa-singleParameter span.aa-right {
  width: 68%;
  color: #282828;
}
.fi-productParameterNodata {
  width: 100%;
  height: auto;
  min-height: 5.6rem;
  padding-left: 0.32rem;
  background: #fff
    url()
    no-repeat center center;
  background-size: 2.24rem;
  border-top: 1px solid #d8d8d8;
  /* border-bottom: 1px solid #d8d8d8; */
  float: left;
  clear: left;
}
</style>
